<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的运动数据</title>
</head>
<body>
    <div class="data-top">
        <!-- 返回按钮 -->
        <p class="tobackbtn" id="toBackBtn"><i class="iconfont icon-fanhui"></i></p>
        <!-- 标题&头像 -->
        <div class="top-title dpflex">
            <h4>我的运动数据</h4>
            <!-- 头像 -->
            <img alt=""  class="head-img" id="headImg">
        </div>
        <!-- 总运动&本周消耗 -->
        <div class="base-data dpflex">
            <div>
                <p class="data-name">总运动</p>
                <p><span class="data-num" id="totalMinutes">99999</span>分钟</p>
            </div>
            <div class="consume">
                <p class="data-name">本周消耗</p>
                <p><span class="data-num" id="totalKilocalorie">99999</span>千卡</p>
            </div>
        </div>
        <!-- 消耗&累计&连续 -->
        <div class="all-data dpflex">
            <div>
                <p class="data-name">消耗(千卡)</p>
                <p>9999999</p>
            </div>
            <div>
                <p class="data-name">累计(天)</p>
                <p>999</p>
            </div>
            <div>
                <p class="data-name">连续(天)</p>
                <p>999</p>
            </div>
        </div>
    </div>

        <!-- 柱状图 -->
        <div id="histogram" class="histogram"></div>

        <!-- 饼状图 -->
        <div id="pie" class="pie"></div>

        <!-- 横向条形图 -->
        <div id="horBar" class="borbar"></div>

        <!-- 折线图 -->
        <div id="lineChart" class="line-chart"></div>

        
    <!--  引入axios -->
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>

    <!-- 引入echarts -->
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
</body>
</html>